import React from "react";
import { Edit2, Trash2 } from "lucide-react";
import type { HealthRecord } from "@/services/health.service";

interface HealthRecordListProps {
  records: HealthRecord[];
  onEdit: (record: HealthRecord) => void;
  onDelete: (id: string) => void;
}

export function HealthRecordList({ records, onEdit, onDelete }: HealthRecordListProps) {
  // 渲染记录值
  function renderRecordValue(record: HealthRecord) {
    if (!record.details) return "-";

    switch (record.recordType) {
      case "weight":
        return record.details.weight
          ? `${record.details.weight.value} ${record.details.weight.unit}`
          : "-";
      case "bloodPressure":
        return record.details.bloodPressure
          ? `${record.details.bloodPressure.systolic}/${record.details.bloodPressure.diastolic} mmHg`
          : "-";
      case "heartRate":
        return record.details.heartRate
          ? `${record.details.heartRate.current} bpm`
          : "-";
      case "sleepQuality":
        return record.details.sleepQuality
          ? `${record.details.sleepQuality.totalSleepDuration} 小时`
          : "-";
      default:
        return "-";
    }
  }

  return (
    <div className="bg-card rounded-xl shadow-lg overflow-hidden">
      <div className="p-6 border-b">
        <h2 className="text-xl font-bold">历史记录</h2>
      </div>
      <div className="max-h-[500px] overflow-y-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
        <table className="w-full">
          <thead className="sticky top-0 bg-card border-b">
            <tr>
              <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">类型</th>
              <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">数值</th>
              <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">时间</th>
              <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">来源</th>
              <th className="px-6 py-3 text-right text-sm font-medium text-muted-foreground">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {records.map((record) => (
              <tr 
                key={record._id} 
                className="hover:bg-muted/50 transition-colors"
              >
                <td className="px-6 py-4 whitespace-nowrap text-sm">
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
                    {record.recordType === "weight" && "体重"}
                    {record.recordType === "bloodPressure" && "血压"}
                    {record.recordType === "heartRate" && "心率"}
                    {record.recordType === "sleepQuality" && "睡眠"}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                  {renderRecordValue(record)}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                  {new Date(record.timestamp).toLocaleString()}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                    record.source === "device" 
                      ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
                      : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                  }`}>
                    {record.source === "device" ? "设备同步" : "手动记录"}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm">
                  <div className="flex items-center justify-end gap-2">
                    <button
                      onClick={() => onEdit(record)}
                      className="p-2 hover:bg-primary/10 text-primary rounded-lg transition-colors"
                      title="编辑"
                    >
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onDelete(record._id)}
                      className="p-2 hover:bg-destructive/10 text-destructive rounded-lg transition-colors"
                      title="删除"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
} 